<template>
    <div class="search-box">
      <!-- 搜索组件 -->
      <Search v v-show="Searchval" />
      <i class="iconfont search-icon2" v-show="Editval">&#xe617;</i>
    </div>
</template>

<script>
import Search from './Search.vue'
export default {
  components:{Search},
  props:{
    // 控制搜索框的显示隐藏
    Searchval:{
      type:Boolean,
      default:false
    },
    // 控制编辑图标的显示隐藏
    Editval:{
      type:Boolean,
      default:false
    }
  }

}
</script>

<style lang="scss" scoped>
$width
.search-box {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: $width;
  height: 44px;
  line-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  .search-icon2 {
    color: rgb(51, 51, 51);
  }
}

</style>